<!DOCTYPE html>
<html>
<head>
    <title>PlayCanvas Typewriter Text</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="icon" type="image/png" href="../playcanvas-favicon.png" />
    <script src="../../build/output/playcanvas.js"></script>
    <style>
        body { 
            margin: 0;
            overflow-y: hidden;
        }
    </style>
</head>

<body>
    <!-- The canvas element -->
    <canvas id="application-canvas"></canvas>

    <!-- The script -->
    <script>
        var canvas = document.getElementById("application-canvas");

        // Create the application and start the update loop
        var app = new pc.Application(canvas);
        app.start();

        // Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);

        window.addEventListener("resize", function () {
            app.resizeCanvas(canvas.width, canvas.height);
        });

        // Create a camera
        var camera = new pc.Entity();
        camera.addComponent("camera", {
            clearColor: new pc.Color(0, 0, 0)
        });
        app.root.addChild(camera);

        // Create a 2D screen
        var screen = new pc.Entity();
        screen.addComponent("screen", {
            referenceResolution: new pc.Vec2(1280, 720),
            scaleBlend: 0.5,
            scaleMode: pc.SCALEMODE_BLEND,
            screenSpace: true
        });
        app.root.addChild(screen);

        // Create a text element that wraps text over several lines
        var loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
        var text = new pc.Entity();
        text.addComponent("element", {
            anchor: [ 0.5, 0.5, 0.5, 0.5 ],
            autoWidth: false,
            fontSize: 32,
            pivot: [ 0.5, 0.5 ],
            text: loremIpsum,
            type: pc.ELEMENTTYPE_TEXT,
            width: 512,
            wrapLines: true
        });
        screen.addChild(text);

        // Load a font
        var fontAsset = new pc.Asset('courier.json', "font", {url: "../assets/fonts/courier.json"});
        fontAsset.on('load', function () {
            // Apply the font to the text element
            text.element.fontAsset = fontAsset;

            // Start with no text printed
            text.element.rangeStart = 0;
            text.element.rangeEnd = 0;

            // Render a new character every 100ms
            setInterval(function () {
                text.element.rangeEnd += 1;
                if (text.element.rangeEnd >= loremIpsum.length) {
                    text.element.rangeEnd = 0;
                }
            }, 100);
        });

        app.assets.add(fontAsset);
        app.assets.load(fontAsset);
    </script>
</body>
</html>
